<template>
  <div class="all">
    <div class="top">
      <el-row>
        <el-form ref="form" inline label-position="left">
          <el-col :span="3">
            <el-form-item label="标 题：">
              <el-input v-model="query.title" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="状 态：">
              <SelfSelect v-model="query.status" :show-list="messageStatus" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="通知时间：">
              <el-date-picker v-model="query.create_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button style="margin-top: 38%" icon="el-icon-search" type="primary" @click="index">查找</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row class="btns">
        <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
        <el-button type="success" icon="el-icon-circle-check" @click="readAll">全部已读</el-button>
      </el-row>
    </div>
    <div>
      <template>
        <el-table :data="dataList" v-loading="loading" style="width: 100%">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="create_time" label="日期" min-width="50%" />
          <el-table-column fixed="right" width="180" align="center">
            <template scope="{row}">
              <el-button v-if="row.status === 1" type="primary" @click="readOne(row.id)">已读</el-button>
              <div v-else style="color: #2ac06d">已读完成</div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import API from '@/api/system/message'
import { mapGetters } from 'vuex'
import { messageStatus } from '@/utils/option'
import SelfSelect from '@/components/select-o'
export default {
  components: {
    SelfSelect
  },
  inject: ['goUrl', 'reload'],
  data() {
    return {
      dataList: [],
      loading: true,
      messageStatus,
      query: {
        limit: 15,
        page: 1
      }
    }
  },
  created() {
    this.index()
    window.addEventListener('keydown', this.handKeyCode, true)
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    index() {
      this.loading = true
      API.getList(this.query).then(res => {
        this.dataList = res.data.data
        this.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    handKeyCode(e) {
      if (e.keyCode === 13 || e.keyCode === 32) { // 回车搜索
        this.index()
      }
    },
    refresh() {
      this.reload()
    },
    readAll() {
      API.message().then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('全部已读')
          this.index()
        }
      })
    },
    readOne(id) {
      API.message(id).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('已读完成')
          this.index()
        }
      })
    }
  }
}
</script>
